<script setup>
import { ref } from 'vue';

  const msg = ref('子组件的你好世界')

  // 子传父第一步,获取emit函数替换 this.$emit
  const emit = defineEmits(['emitParent'])

  const handleClick = () => {
    console.log('子组件函数被触发');
    // 想要通知父组件
    // 以前写法是 this.$emit
    // 想要通知父组件时, 触发 emit 带上事件名, 可以传参
    emit('emitParent', 888999)
  }

  // 愿意暴露给父组件的数据和函数, 需要用 defineExpose 进行生命
  defineExpose({msg, handleClick})
  
  // 父传子第二部,子组件定义愿意接受的数据
  // 如果要在js代码中读取使用, 就需要赋值给一个变量才行
  const data = defineProps({
    money: Number,
    name: String
  })
  console.log('父组件传入数据',data);
</script>

<template>
  <div class="box">
    <div>子组件 {{ msg }}</div>
    <button @click="handleClick">子组件按钮</button>
    <div>{{ name }}{{ money }}</div>
  </div>
</template>

<style>
.box {
  padding: 20px;
  border: 1px solid salmon;
  background-color:bisque;
}
</style>